$purple-color: #6a5acd;
$blue-color: #4169e1;
//设置渐变色
$background-gradient: linear-gradient($purple-color, $blue-color);
$border-radius: 10px;
body {
    background: $background-gradient;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
     .login-container {
        background: rgba(255, 255, 255, 0.8);
        border-radius: $border-radius;
        box-shadow: 0 0 9px 5px #beb9b9;
        width: 400px;
        padding: 30px;
        display: flex;
        .left-side, .right-side {
            width: 50%;
        }
        .left-side {
            text-align: center;
            position: relative;
            .circle {
                width: 100px;
                height: 100px;
                background-color: $purple-color;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .login-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 15px;
                z-index: 1;
            }

        }

        form {
            display: flex;
            flex-direction: column;
            input[type="text"],
            input[type="password"] {
                margin-bottom: 10px;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            input[type="submit"],
            input[type="reset"] {
                margin-top: 10px;
                padding: 10px;
                border: none;
                background-color: $primary-color;
                color: white;
                cursor: pointer;
                border-radius: 5px;
            }
        }
    }
}